<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>表单集合演示</legend>
</fieldset>

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
            <input type="text" name="path" lay-verify="path" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联动选择框</label>
        <div class="layui-input-inline">
            <select name="cid1" lay-filter="cid1">
                <?php if ($category1): ?>
                    <?php foreach ($category1 as $category1Item): ?>
                        <option value="<?php echo $category1Item['id'] ?? '' ?>"><?php echo $category1Item['title'] ?? '' ?></option>
                    <?php endforeach; ?>
                <?php endif; ?>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="cid2" id="cid2"></select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<script src="layui/layui.all.js" charset="utf-8"></script>
<script src="js/jquery.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form'], function () {
        var form = layui.form
            , layer = layui.layer;

        //监听提交
        form.on('submit(demo1)', function (data) {
            let form_data = data.field;
            let name = form_data.name;
            let path = form_data.path;
            let cid1 = form_data.cid1;
            let cid2 = form_data.cid2;

            $.post("?r=admin/book-add", {name: name, path: path, cid1: cid1, cid2: cid2}, function (res) {
                if (res.code === 'success') {
                    layer.msg("添加成功", {time: 1000}, function () {
                        window.location.href = "?r=admin/book";
                    })
                }
            }, 'json')
        });

        form.on('select(cid1)', function (data) {
            let id = data.value;
            $.post("?r=admin/get-category2", {pid: id}, function (res) {
                let data = res.data;
                let html = '';
                for (let i = 0; i < data.length; i++) {
                    html += '<option value="' + data[i].id + '">' + data[i].title + '</option>';
                }
                $("#cid2").html(html);
                form.render('select');//更新渲染select
            }, 'json')
        });
    });
</script>
